<template>
	<view class="">
		
		<!-- 用户信息 -->
		<view class="user_info" v-if="imageDetail.user.name">
			<view class="user_icon"><image :src="imageDetail.user.avatar" mode="widthFix"></image></view>
			<veiw class="user_desc">
				<view class="user_name">{{imageDetail.user.name}}</view>
				<view class="user_time">{{imageDetail.cnTime}}</view>
			</veiw>
		</view>
		
		<!-- 大图 -->
		<view class="high_img">
			<image :src="imageDetail.thumb" mode="widthFix"></image>
		</view>
		
		<!-- 点赞收藏 -->
		<view class="user_rank" v-if="imageDetail.rank">
			<view class="rank">
				<text class="iconfont icon-dianzan">{{imageDetail.rank}}</text>
			</view>
			<view class="user_collect">
				<text class="iconfont icon-like-line">收藏</text>
			</view>
		</view>
		
		
		<view class="downLoad">
			<view class="down_btn" @click="handleClick">保存原图</view>
		</view>
		
	</view>
</template>

<script>
	import moment from "../../utils/moment.min.js"
	moment.locale("zh-cn")
	export default{
		data(){
			return{
				//图片信息对象 包含着用户头像
				imageDetail:{}
			}
		},
		onLoad(){
			const {imgList,imgIndex} = getApp().globalData
			this.imageDetail = imgList[imgIndex]
			this.imageDetail.cnTime = moment(this.imageDetail.atime * 1000).fromNow()
		},
		methods:{
			async handleClick(){
				// 检查权限
				uni.getSetting({
					success(res) {
						const {authSetting} = res
						if(authSetting['scope.writePhotosAlbum'] == false){
							uni.openSetting({})
							return;
						}
					}
				})
				
				
				uni.showLoading({title:"下载中..."})
				// 临时路径
				const res = await uni.downloadFile({url:this.imageDetail.img})
				const {tempFilePath} = res[1]
				// 保存到相册
				uni.saveImageToPhotosAlbum({
					filePath:tempFilePath
				})
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user_info{
		display: flex;
		padding: 20rpx;
		.user_icon{
			padding: 0 20rpx;
			image{
				width: 88rpx;
				border-radius: 50%;
			}
		}
		.user_desc{
			.user_name{
				color: #000;
				font-weight: 600;
			}
			.user_time{
				color: #ccc;
				font-size: 24rpx;
				padding: 10rpx 0;
			}
		}
	}
	
	.user_rank{
		display: flex;
		height: 80rpx;
		border-bottom: 5rpx solid #eee;
		.rank{
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			border-right: 1rpx solid #eee;
		}
		.user_collect{
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
		}
	}
	
	.downLoad{
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.down_btn{
				width: 55%;
				height: 85%;
				background-color: #545454;
				color: #ccc;
				font-size: 50rpx;
				font-weight: 600;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 15rpx;
		}
	}
</style>
